<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8" name="viewport" content="width=device-width,initial-scale=1.0,user-scalable=no">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <link rel="shortcut icon" href="../img/com/logo.png">
    <link rel="stylesheet" href="../asserts/css/normalize.css">
    <link rel="stylesheet" href="../css/style.css">
    <link rel="stylesheet" href="../css/pageCom.css">
    <style>
        .fl{
            float: left;
        }
        .fr{
            float: right;
        }
        .container {
            /*flex-direction: row;*/
        }
       .main {
            display: flex;
            flex-direction: column;
            flex: 1;
        }
        .main > div {
            flex: 1;
            height: 33.33%;
        }
        .chartTitle_right img{
            width: 0.8rem;
            height: 0.8rem;
            vertical-align: middle;
            margin-right: 0.5rem;
        }
        .chartTitle_right{
            position: absolute;
            right: 1rem;
        }
        .chartContent{
            height: 100%;
        }
        .dayin{
            vertical-align: middle;
            font-size: 0.76rem;
        }
        .chartTitle_right h5{
            display: inline-block;
            vertical-align: middle;

        }
        .main_top_left{
            height: 100%;
            width: 15%;
        }
        .main_top_middle{
            height: 100%;
            width: 60%;
        }

        /*中间的五个盒子*/
        .main_top_middle{
            padding: 0.5rem 0;
        }


        .main_top_up,.main_top_down{
            width: 100%;
            height: 50%;
            margin: 0 auto;
        }
        .main_top_upBox,.main_top_downBox{
            width: 30%;
            height: 90%;
            background-color:rgba(0,0,0,.2);
            margin-left: 2%;
        }
        .main_top_upBox:nth-child(1){
            margin-left: 19%;
        }
        .main_top_upBoxContent{
            padding: .2rem .5rem;
        }
        .main_top_upBoxContent,.main_top_downBoxContent{
            padding: 0.2rem 0.8rem;
        }
        .main_top_upBoxContent span,.main_top_downBoxContent span{
            font-size: 0.76rem;
        }
        .main_top_upBoxContent .total a, .main_top_downBoxContent .total a{
            color: #fff;
            font-size: 1.3rem;
        }
        /*右侧的雷达图*/
        .main_top_right{
            height: 100%;
            width: 25%;

        }
        .chartBox > .chartContent > .chartBody  [id^=ec] {
            height: 100%;
        }

        /*左侧综合得分部分 start*/
        .main_top_leftContent{
            position: relative;
            top: 15%;
            left: 20%;
        }
        .main_top_leftContentPic{
            position: relative;
            width: 60%;
            height: 60%;
        }
        .main_top_leftContentPic img{
            width: 100%;
        }
        .main_top_leftContentWords{
            position: absolute;
            text-align: center;
            width: 40%;
            top: 15%;
            left: 10%;
        }
        .main_top_leftContentWords span:nth-child(1){
            font-size: 2rem;
            color:#fffb8f;
            /*font-weight:500;*/
        }
        .main_top_leftContentWords span:last-child{
            font-size: 0.9rem;
            color:#00adef;
            vertical-align: middle;
        }

        .icon{
            position: absolute;
            top: -10%;
            left: -13%;
            display: inline-block;
            width: 2rem;
            height: 2rem;
            background-size:contain;
        }
        .icon span{
            position: absolute;
            font-size: 0.95rem;
            top: 0.2rem;
            left: 0.55rem;
        }
        .first .icon{
            background: url("../img/tinified/1.png") no-repeat;
            -webkit-background-size: contain;
            background-size: contain;
        }
        .second .icon{
            background: url("../img/tinified/2.png") no-repeat;
            -webkit-background-size: contain;
            background-size: contain;

        }
        .third .icon{
            background: url("../img/tinified/3.png") no-repeat;
            -webkit-background-size: contain;
            background-size: contain;
        }
        .fourth .icon{
            background: url("../img/tinified/4.png") no-repeat;
            -webkit-background-size: contain;
            background-size: contain;
        }



        /*左侧综合得分部分 end*/
    </style>
</head>
<body id="04_01jingyingnengli" data-title="经营能力">
<div class="container">
    <div class="main">
        <div class="main-first">
            <div class="chartBox ec003">
                <div class="chartTitle">
                    <h3>宜人贷有限公司</h3>
                    <div class="chartTitle_right">
                        <img src="../img/chartTitle_right.png" alt="">
                        <div class="dayin fr">
                            <h5>打印监管报告</h5>
                        </div>

                    </div>
                </div>
                <div class="chartContent">
                    <div class="chartBody">
                        <!--最左侧 综合得分-->
                        <div class="main_top_left fl">
                            <div class="main_top_leftContent">
                                <div class="main_top_leftContentPic first">
                                    <img src="../img/defen.png" alt="">
                                    <span class="icon"><span>1</span></span>

                                </div>
                                <div class="main_top_leftContentWords">
                                    <span id="zonghedefen1">9</span><br>
                                    <span>风险指数</span>
                                </div>
                            </div>
                        </div>
                        <!--middle五个盒子-->
                        <div class="main_top_middle fl">
                            <div class="main_top_up">
                                <div class="main_top_upBox fl">
                                    <div class="main_top_upBoxContent">
                                        <span>成交额</span><br><span class="total"><a href="#">347564</a></span>&nbsp;<span>万元</span>
                                    </div>
                                </div>
                                <div class="main_top_upBox fl">
                                    <div class="main_top_upBoxContent">
                                        <span>成交量</span><br><span class="total"><a href="#">34476</a></span>&nbsp;<span>笔</span>
                                    </div>
                                </div>
                            </div>
                            <div class="main_top_down">
                                <div class="main_top_downBox fl">
                                    <div class="main_top_downBoxContent">
                                        <span>平均满标天数</span><br><span class="total"><a href="#">34</a></span>&nbsp;<span>天</span>
                                    </div>
                                </div>
                                <div class="main_top_downBox fl">
                                    <div class="main_top_downBoxContent">
                                        <span>贷款余额</span><br><span class="total"><a href="#">34476</a></span>&nbsp;<span>万元</span>
                                    </div>
                                </div>
                                <div class="main_top_downBox fl">
                                    <div class="main_top_downBoxContent">
                                        <span>借款人数</span><br><span class="total"><a href="#">6543</a></span>&nbsp;<span>人</span>
                                    </div>
                                </div>
                            </div>
                        </div>
                        <!--最右侧 雷达图-->
                        <div class="main_top_right fl">
                            <div id="ec0102_001"></div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <div class="main-second">
            <div class="chartBox ec003">
                <div class="chartTitle">
                    <h3>宜人贷有限公司</h3>
                    <div class="chartTitle_right">
                        <img src="../img/chartTitle_right.png" alt="">
                        <div class="dayin fr">
                            <h5>打印监管报告</h5>
                        </div>
                    </div>
                </div>
                <div class="chartContent">
                    <div class="chartBody">
                        <!--最左侧 综合得分-->
                        <div class="main_top_left fl">
                            <div class="main_top_leftContent">
                                <div class="main_top_leftContentPic second">
                                    <img src="../img/defen.png" alt="">
                                    <span class="icon">
                                        <span>2</span>
                                    </span>
                                </div>
                                <div class="main_top_leftContentWords" >
                                    <span id="zonghedefen2">8</span><br>
                                    <span>风险指数</span>
                                </div>
                            </div>
                        </div>
                        <!--middle五个盒子-->
                        <div class="main_top_middle fl">
                            <div class="main_top_up">
                                <div class="main_top_upBox fl">
                                    <div class="main_top_upBoxContent">
                                        <span>成交额</span><br><span class="total"><a href="#">347564</a></span>&nbsp;<span>万元</span>
                                    </div>
                                </div>
                                <div class="main_top_upBox fl">
                                    <div class="main_top_upBoxContent">
                                        <span>成交量</span><br><span class="total"><a href="#">34476</a></span>&nbsp;<span>笔</span>
                                    </div>
                                </div>
                            </div>
                            <div class="main_top_down">
                                <div class="main_top_downBox fl">
                                    <div class="main_top_downBoxContent">
                                        <span>平均满标天数</span><br><span class="total"><a href="#">34</a></span>&nbsp;<span>天</span>
                                    </div>
                                </div>
                                <div class="main_top_downBox fl">
                                    <div class="main_top_downBoxContent">
                                        <span>贷款余额</span><br><span class="total"><a href="#">34476</a></span>&nbsp;<span>万元</span>
                                    </div>
                                </div>
                                <div class="main_top_downBox fl">
                                    <div class="main_top_downBoxContent">
                                        <span>借款人数</span><br><span class="total"><a href="#">6543</a></span>&nbsp;<span>人</span>
                                    </div>
                                </div>
                            </div>
                        </div>
                        <!--最右侧 雷达图-->
                        <div class="main_top_right fl">
                            <div id="ec0102_002"></div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <div class="main-third">
            <div class="chartBox ec003">
                <div class="chartTitle">
                    <h3>宜人贷有限公司</h3>
                    <div class="chartTitle_right">
                        <img src="../img/chartTitle_right.png" alt="">
                        <div class="dayin fr">
                            <h5>打印监管报告</h5>
                        </div>
                    </div>
                </div>
                <div class="chartContent">
                    <div class="chartBody">
                        <!--最左侧 综合得分-->
                        <div class="main_top_left fl">
                            <div class="main_top_leftContent">
                                <div class="main_top_leftContentPic third">
                                    <img src="../img/defen.png" alt="">
                                    <span class="icon">
                                        <span>3</span>
                                    </span>
                                </div>
                                <div class="main_top_leftContentWords" >
                                    <span id="zonghedefen3">6</span><br>
                                    <span>风险指数</span>
                                </div>
                            </div>
                        </div>
                        <!--middle五个盒子-->
                        <div class="main_top_middle fl">
                            <div class="main_top_up">
                                <div class="main_top_upBox fl">
                                    <div class="main_top_upBoxContent">
                                        <span>成交额</span><br><span class="total"><a href="#">347564</a></span>&nbsp;<span>万元</span>
                                    </div>
                                </div>
                                <div class="main_top_upBox fl">
                                    <div class="main_top_upBoxContent">
                                        <span>成交量</span><br><span class="total"><a href="#">34476</a></span>&nbsp;<span>笔</span>
                                    </div>
                                </div>
                            </div>
                            <div class="main_top_down">
                                <div class="main_top_downBox fl">
                                    <div class="main_top_downBoxContent">
                                        <span>平均满标天数</span><br><span class="total"><a href="#">34</a></span>&nbsp;<span>天</span>
                                    </div>
                                </div>
                                <div class="main_top_downBox fl">
                                    <div class="main_top_downBoxContent">
                                        <span>贷款余额</span><br><span class="total"><a href="#">34476</a></span>&nbsp;<span>万元</span>
                                    </div>
                                </div>
                                <div class="main_top_downBox fl">
                                    <div class="main_top_downBoxContent">
                                        <span>借款人数</span><br><span class="total"><a href="#">6543</a></span>&nbsp;<span>人</span>
                                    </div>
                                </div>
                            </div>
                        </div>
                        <!--最右侧 雷达图-->
                        <div class="main_top_right fl">
                            <div id="ec0102_003"></div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <div class="main-fourth">
            <div class="chartBox ec003">
                <div class="chartTitle">
                    <h3>宜人贷有限公司</h3>
                    <div class="chartTitle_right">
                        <img src="../img/chartTitle_right.png" alt="">
                        <div class="dayin fr">
                            <h5>打印监管报告</h5>
                        </div>
                    </div>
                </div>
                <div class="chartContent">
                    <div class="chartBody">
                        <!--最左侧 综合得分-->
                        <div class="main_top_left fl">
                            <div class="main_top_leftContent">
                                <div class="main_top_leftContentPic third">
                                    <img src="../img/defen.png" alt="">
                                    <span class="icon">
                                        <span>4</span>
                                    </span>
                                </div>
                                <div class="main_top_leftContentWords" >
                                    <span id="zonghedefen4">5</span><br>
                                    <span>风险指数</span>
                                </div>
                            </div>
                        </div>
                        <!--middle五个盒子-->
                        <div class="main_top_middle fl">
                            <div class="main_top_up">
                                <div class="main_top_upBox fl">
                                    <div class="main_top_upBoxContent">
                                        <span>成交额</span><br><span class="total"><a href="#">347564</a></span>&nbsp;<span>万元</span>
                                    </div>
                                </div>
                                <div class="main_top_upBox fl">
                                    <div class="main_top_upBoxContent">
                                        <span>成交量</span><br><span class="total"><a href="#">34476</a></span>&nbsp;<span>笔</span>
                                    </div>
                                </div>
                            </div>
                            <div class="main_top_down">
                                <div class="main_top_downBox fl">
                                    <div class="main_top_downBoxContent">
                                        <span>平均满标天数</span><br><span class="total"><a href="#">34</a></span>&nbsp;<span>天</span>
                                    </div>
                                </div>
                                <div class="main_top_downBox fl">
                                    <div class="main_top_downBoxContent">
                                        <span>贷款余额</span><br><span class="total"><a href="#">34476</a></span>&nbsp;<span>万元</span>
                                    </div>
                                </div>
                                <div class="main_top_downBox fl">
                                    <div class="main_top_downBoxContent">
                                        <span>借款人数</span><br><span class="total"><a href="#">6543</a></span>&nbsp;<span>人</span>
                                    </div>
                                </div>
                            </div>
                        </div>
                        <!--最右侧 雷达图-->
                        <div class="main_top_right fl">
                            <div id="ec0102_004"></div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

<script src="../asserts/js/echarts-4.0.js"></script>
<script src="../asserts/js/jquery-2.2.4.js"></script>
<script src="../js/main.js"></script>
<script src="../js/chartsCom.js"></script>

</body>
</html>
<script>
    var allCharts = [];
    $(function(){
        var myChart1 = echarts.init($("#ec0102_001")[0]);
        myChart1.setOption(opt_com);
        myChart1.setOption({
            tooltip: {},
            legend: {
                show:false
            },
            radar: {
                center:['50%','50%'],
                radius:'60%',
                name: {
                    textStyle: {
                        color: '#fff',
                        fontSize:12

                    }
                },
                axisLine: {
                    lineStyle: {
                        color: '#00abde'
                    }
                },
                splitLine: {
                    lineStyle: {
                        color: '#00abde'
                    }
                },
                splitArea: {
                    show: false
                },
                indicator: [
                    { name: '合规风险', max: 6500},
                    { name: '信用风险', max: 16000},
                    { name: '资产风险', max: 30000},
                    { name: '市场风险', max: 38000},
                    { name: '声誉风险', max: 52000},
                    { name: '周边风险', max: 25000}
                ]
            },


            series: [{
                name: '预算 vs 开销（Budget vs spending）',
                type: 'radar',
                areaStyle: {normal: {}},
                data : [
                    {
                        value : [4300, 10000, 28000, 35000, 50000, 19000],
                        name : '预算分配（Allocated Budget）'
                    }

                ]
            }]
        });

    //    第二个模块  右二
        var myChart2 = echarts.init($("#ec0102_002")[0]);
        myChart2.setOption(opt_com);
        myChart2.setOption({
            tooltip: {},
            legend: {
                show:false
            },
            radar: {
                center:['50%','50%'],
                radius:'60%',
                name: {
                    textStyle: {
                        color: '#fff',
                        fontSize:12
                    }
                },
                axisLine: {
                    lineStyle: {
                        color: '#00abde'
                    }
                },
                splitLine: {
                    lineStyle: {
                        color: '#00abde'
                    }
                },
                splitArea: {
                    show: false
                },
                indicator: [
                    { name: '合规风险', max: 6500},
                    { name: '信用风险', max: 16000},
                    { name: '资产风险', max: 30000},
                    { name: '市场风险', max: 38000},
                    { name: '声誉风险', max: 52000},
                    { name: '周边风险', max: 25000}
                ]
            },


            series: [{
                name: '预算 vs 开销（Budget vs spending）',
                type: 'radar',
                areaStyle: {normal: {}},
                data : [
                    {
                        value : [4300, 10000, 28000, 35000, 50000, 19000],
                        name : '预算分配（Allocated Budget）'
                    }

                ]
            }]
        });

    //    模块三  右三
        var myChart3 = echarts.init($("#ec0102_003")[0]);
        myChart3.setOption(opt_com);
        myChart3.setOption({
            tooltip: {},
            legend: {
                show:false
            },
            radar: {
                center:['50%','50%'],
                radius:'60%',
                name: {
                    textStyle: {
                        color: '#fff',
                        fontSize:12
                    }
                },
                axisLine: {
                    lineStyle: {
                        color: '#00abde'
                    }
                },
                splitLine: {
                    lineStyle: {
                        color: '#00abde'
                    }
                },
                splitArea: {
                    show: false
                },
                indicator: [
                    { name: '合规风险', max: 6500},
                    { name: '信用风险', max: 16000},
                    { name: '资产风险', max: 30000},
                    { name: '市场风险', max: 38000},
                    { name: '声誉风险', max: 52000},
                    { name: '周边风险', max: 25000}
                ]
            },


            series: [{
                name: '预算 vs 开销（Budget vs spending）',
                type: 'radar',
                areaStyle: {normal: {}},
                data : [
                    {
                        value : [4300, 10000, 28000, 35000, 50000, 19000],
                        name : '预算分配（Allocated Budget）'
                    }

                ]
            }]
        });

        // 模块三  右三
        var myChart4 = echarts.init($("#ec0102_004")[0]);
        myChart4.setOption(opt_com);
        myChart4.setOption({
            tooltip: {},
            legend: {
                show:false
            },
            radar: {
                center:['50%','50%'],
                radius:'60%',
                name: {
                    textStyle: {
                        color: '#fff',
                        fontSize:12
                    }
                },
                axisLine: {
                    lineStyle: {
                        color: '#00abde'
                    }
                },
                splitLine: {
                    lineStyle: {
                        color: '#00abde'
                    }
                },
                splitArea: {
                    show: false
                },
                indicator: [
                    { name: '合规风险', max: 6500},
                    { name: '信用风险', max: 16000},
                    { name: '资产风险', max: 30000},
                    { name: '市场风险', max: 38000},
                    { name: '声誉风险', max: 52000},
                    { name: '周边风险', max: 25000}
                ]
            },


            series: [{
                name: '预算 vs 开销（Budget vs spending）',
                type: 'radar',
                areaStyle: {normal: {}},
                data : [
                    {
                        value : [4300, 10000, 28000, 35000, 50000, 19000],
                        name : '预算分配（Allocated Budget）'
                    }

                ]
            }]
        });
        //本页所有图表
        allCharts = [myChart1, myChart2, myChart3];
    })
</script>
